<template>
	<view class="page">
		<view class="banner">
			<uni-swiper-dot :info="bannerImage" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item ,index) in bannerImage" :key="index">
						<view :class="item.colorClass" class="swiper-item">
							<image :src="item.url" mode="aspectFill" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="two-image-button-box">
			<image src="http://yao.hayzon.com/static/andrology/img1.png"></image>
			<image src="http://yao.hayzon.com/static/andrology/img2.png"></image>
			<view class="buttons-box">
				<view class="button-item" v-for="(item,index) in types" :key="index" :style="{'margin-right':(index+1)%3 != 0 ? '35upx':'0'}" @tap="navigateTo(item)">
					{{ item }}
				</view>
			</view>
		</view>
		<view class="doctor-list">
			<view class="doctor-item" :style="{'background-color':item.is_signing ? '#fbecd1' : '#fbecd1'}" v-for="(item,index) in doctors"
			 :key="index">
				<image :src="item.face" class="doctor-item-face"></image>
				<view class="doctor-item-info-box">
					<view>
						<text class="doctor-item-info-name">{{ item.name }}</text>
						<text v-if="item.isOnline" class="doctor-online">医生在线</text>
						<text v-if="!item.isOnline" class="doctor-not-online">医生不在线</text>
					</view>
					<view class="doctor-item-info-title-box">
						<text>{{ item.title }}</text>
						<text v-for="specialtyItem in item.specialty" :key="index">{{ specialtyItem }}</text>
					</view>
					<view class="doctor-item-info-good-box">
						{{ item.good }}
					</view>
					<view class="doctor-item-info-price-box">
						<text>图文复诊：</text>
						<text class="text-r">￥{{ item.bargain_price }}元/次</text>
						<text class="text-d">￥{{ item.original_price }}</text>
					</view>
					<view>
						<image v-if="item.is_medal" src="http://yao.hayzon.com/static/andrology/crown.png" class="crown"></image>
						<text v-if="item.is_medal" class="text-r-big">金牌疗效</text>
						<image v-if="item.is_quick" src="http://yao.hayzon.com/static/andrology/lightning.png" class="lightning"></image>
						<text v-if="item.is_quick" class="text-r-big">快速响应</text>
						<text v-if="item.is_recommend" class="text-border-box">平台推荐医生</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	export default {
		components: {
			uniSwiperDot
		},
		data() {
			return {
				bannerImage: [{
						colorClass: 'uni-bg-red',
						url: 'http://yao.hayzon.com/static/replace0823/02.png',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'http://yao.hayzon.com/static/replace0823/01.png',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'http://yao.hayzon.com/static/replace0823/03.png',
						content: '内容 C'
					}
				],
				types: ["阳痿", "早泄", "月经不调", "不孕", "痤疮", "男科", "妇科", "皮肤科", "内科", "外科", "儿科", "全科"],
				doctors: [{
						name: "殷永红",
						face: "http://yao.hayzon.com/static/andrology/a0.png",
						isOnline: true,
						title: "执业中医师",
						specialty: ["中医全科", "疑难病科"],
						good: "擅长治疗男科，如：阳痿、早泄、前列腺...",
						bargain_price: "30",
						original_price: "90",
						is_medal: true,
						is_quick: true,
						is_recommend: true,
						is_signing: true
					},
					{
						name: "刘东东",
						face: "http://yao.hayzon.com/static/andrology/a1.png",
						isOnline: false,
						title: "主治医师",
						specialty: ["中医男科", "中医内科"],
						good: "治疗肾虚，早泄、前列腺炎等男科疾病以...",
						bargain_price: "39",
						original_price: "117",
						is_medal: true,
						is_quick: true,
						is_recommend: false,
						is_signing: true
					},
					{
						name: "闫振东",
						face: "http://yao.hayzon.com/static/andrology/a2.png",
						isOnline: true,
						title: "中医师",
						specialty: ["中医内科", "疑难并可"],
						good: "擅长治疗前列腺增生、早泄、前列腺炎...",
						bargain_price: "30",
						original_price: "90",
						is_medal: true,
						is_quick: false,
						is_recommend: true,
						is_signing: false
					},
					{
						name: "邓爱英",
						face: "http://yao.hayzon.com/static/andrology/a3.png",
						isOnline: true,
						title: "主治中医师",
						specialty: ["男科", "妇科", "糖尿病"],
						good: "擅长治疗不孕症、前列腺增生、弱精症...",
						bargain_price: "30",
						original_price: "90",
						is_medal: true,
						is_quick: true,
						is_recommend: true,
						is_signing: true
					}
				]
			}
		},
		methods: {
			navigateTo(url) {
				if (url == '男科') {
					url = 'andrology'
					uni.navigateTo({
						url: url
					})
				}
			}
		}
	}
</script>

<style>
	.banner {
		margin-top: 10upx;
		margin-bottom: 10upx;
	}

	.swiper-box {
		height: 200upx;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		background: #eee;
		color: #fff;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.two-image-button-box {
		/* background-color:#ffffff; */
		background-repeat: no-repeat;
		background-size: 100%;
		/* background-image: url("~http://yao.hayzon.com/static/temp/01.png"); */
		height: 100%;
		background-color: #fff;
		padding: 16upx 20upx;
	}

	.two-image-button-box image {
		width: 345upx;
		height: 168upx;
		margin-bottom: 11upx;
	}

	.two-image-button-box image:first-child {
		margin-right: 22upx;
	}

	.buttons-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.button-item {
		width: 30%;
		background-image: url("~http://yao.hayzon.com/static/andrology/button_background.png");
		background-size: 100%;
		text-align: center;
		margin-bottom: 30upx;
		line-height: 62upx;
	}

	.doctor-list {
		margin-top: 10upx;
	}

	.doctor-item {
		background-repeat: no-repeat;
		background-size: 100%;
		/* background-image: url("~http://yao.hayzon.com/static/temp/02.png"); */
		margin-bottom: 5upx;
		display: flex;
		flex-direction: row;
		padding-top: 20upx;
	}

	.doctor-item-face {
		width: 160upx;
		height: 160upx;
		margin-top: 30upx;
		margin-left: 24upx;
		flex-shrink: 0;
	}

	.doctor-item-info-box {
		margin-left: 36upx;
	}

	.doctor-item-info-name {
		font-weight: bold;
		font-size: 1.1em;
		color: #333333;
		margin-right: 30upx;
	}

	.doctor-online,
	.doctor-not-online {
		font-size: 0.5em;
		color: #fff;
		background: #4570f2;
		padding-left: 15upx;
		padding-right: 15upx;
		border-radius: 20upx;
	}

	.doctor-not-online {
		background: #cacaca;
	}

	.doctor-item-info-title-box,
	.doctor-item-info-good-box,
	.doctor-item-info-price-box {
		color: #333333;
		line-height: 1.5;
		overflow: hidden;
		max-height: 40upx;
	}

	.doctor-item-info-title-box text {
		margin-right: 10upx;
	}

	.text-r {
		color: #ff0000;
		font-size: 1.15em;
	}

	.text-r-big {
		color: #ae8147;
		font-size: 1em;
		font-weight: bold;
		letter-spacing: -1px;
	}

	.text-border-box {
		color: #ae8147;
		margin-left: 30upx;
		letter-spacing: -1px;
		font-size: 0.9em;
		border: solid #ae8147 1px;
	}

	.text-d {
		text-decoration: line-through;
		font-size: 0.6em;
	}

	.crown,
	.lightning {
		width: 55upx;
		height: 55upx;
		vertical-align: text-bottom;
	}
</style>
